<template>
    <div class="Category">
        <!-- 搜索模块 直接放就可以了 -->
        <div class="fserch"></div>
        <!-- 分类模块 -->
        <div class="fenlei">
          <div class="fen1">
            <div
              :class="{ fenleftbox: true, bgwhite: leftIndex === i }"
              v-for="(e, i) in categoryList"
              :key="i"
              @click="choose(i)"
            >
              <p :class="{ bodered: leftIndex === i }">{{ e.name }}</p>
            </div>
          </div>
          <div v-if="flag" class="fen2">
            <div class="fenrightimg">
              <img :src="categoryList[leftIndex].banner_url" alt="" />
              <div class="mcwenxi">
                {{ categoryList[leftIndex].front_name }}
              </div>
            </div>
            <div class="fenrightcont">
              <div class="fenrighthead">
                <p>{{ categoryList[leftIndex].name }}</p>
                <div class="xiantiao"></div>
              </div>
              <!-- 右边小图标 -->
              <div class="fenrightbody">
                <div
                  class="contenbox"
                  v-for="(item, index) in currentList.subCategoryList"
                  :key="item.id"
                >
                  <img :src="item.wap_banner_url" alt="" />
                  <p>{{ item.name }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>

</template>

<script>
    import {GetCategory, GetCurrentCategory} from '../request/api.js'
    export default {
      data() {
        return {
          categoryList:[],
          leftIndex: 0, //获取左侧下标
          flag:false,
          // 当前页
          currentList:[]
        }
      },
      created() {
          GetCategory().then(res => {
              console.log(res.data.categoryList);
              let {categoryList} = res.data
              this.categoryList = categoryList;
              this.flag = true
                            
              GetCurrentCategory({
                  id:this.categoryList[this.leftIndex].id
              }).then(res=>{
                  console.log(res.data);
                  this.currentList = res.data.currentCategory;
                  // console.log(this.currentList);
              })
          });
      },
      methods:{
          choose(i) {
                this.leftIndex = i;
                
                GetCurrentCategory({
                    id:this.categoryList[this.leftIndex].id
                }).then(res=>{
                    console.log(res.data);
                    this.currentList = res.data.currentCategory;
                    console.log(this.currentList);
                })
                
          },
      }
    }
</script>

<style lang="less" scoped>
    .Category {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      // 搜索栏
      .fserch {
      }
      //分类栏
      .fenlei {
        flex: 1;
        display: flex;
        flex-direction: row;
        // 左边
        .fen1 {
          flex: 1;
          background-color: #f7f8fa;
          overflow: auto;
          // 字的盒子
          .fenleftbox {
            height: 60px;
            display: flex;
            align-items: center;
            // justify-content: center;
            p {
              padding-left: 4vw;
              box-sizing: border-box;
              border-left: 3px solid transparent;
            }
            // 边框变红
            .bodered {
              border-left: 3px solid red;
            }
          }
          //背景变白
          .bgwhite {
            background-color: white !important;
          }
        }
        // 右边
        .fen2 {
          flex: 4;
          background-color: white;
          overflow: auto;
          display: flex;
          flex-direction: column;
          // 大图片
          .fenrightimg {
            flex: 1;
            position: relative;
            border-radius: 2vw;
            width: 98%;
            margin: 1vw auto;
            img {
              width: 100%;
              height: 100%;
              border-radius: 2vw;
            }
            //图片蒙层
            .mcwenxi {
              border-radius: 2vw;
              position: absolute;
              top: 0vw;
              left: 0vw;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: rgba(109, 109, 109, 0.6);
              box-shadow: 0px 0px 2vw rgb(109, 109, 109);
              color: white;
              font-size: 2vw;
            }
          }
          // 内容
          .fenrightcont {
            flex: 4;
            // 头部
            .fenrighthead {
              height: 12vw;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              p {
                padding: 0 10vw;
                position: relative;
                z-index: 4;
                background-color: white;
                font-size: 4vw;
              }
              // 线条
              .xiantiao {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 50vw;
                height: 0.8vw;
                background-color: #d9d9d9;
              }
            }
            // 内用大盒子
            .fenrightbody {
              flex: 10;
              // background-color: yellow;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              // 小盒子
              .contenbox {
                width: 33.3%;
                height: 26vw;
                border: 1px solid #f7f8f9;
                background-color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                img{
                    width: 50%;
                }
                p {
                  font-size: 2vw;
                  margin-top: 1vw;
                  margin-bottom: 0px;
                }
                box-sizing: border-box;
              }
            }
          }
        }
      }
    }

</style>
